<template>
<!-- 头尾部 -->
  <div class="bar">
    <!-- logo -->                     
    <img src="../assets/image/logo_min.png" alt="">                             
    <!-- 中间的搜索框 -->
    <!-- 点击跳转到搜索页面 -->
    <div class="sou" @click="$router.push('/home/sou')">
      <input type="text" value="请输入关键字">
      <i class="iconfont iconsousuo"></i>
    </div>
    <!-- 右边的按钮-->
    <div class="diamond">
      <i class="iconfont icongongnengfuwu"></i>
    </div>
  </div>

</template>                                             

<style lang="scss" scoped>
  .bar{
    height: 50px;
    background: #0a0d18;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      margin-left:10px;
      width: 127px;
      height: 30px;
    }
    .sou{
      width: 175px;
      flex: 1;
      display: flex;
      margin:0 10px 0 10px;
      justify-content: center;
      align-items: center;
      input{
        flex: 1;
        width: 175px;
        height: 30px;
        border: 1px solid #020411;
        background-color: #323232;
        color: #999;
      }
      i{
        font-size: 20px;
        height: 30px;
        background: #323232;
        line-height: 30px;
        color: #999;
      }
    }
    .diamond{
        margin-right:10px;
      width: 24px;
      height: 24px;
      color: white;
      i{
        font-size: 24px;
      }
    }
  }
</style>
